<template>
      <view class="common-card dy-song-box">
        <view class="title-box">
          <view class="sub-title">风格推荐</view>
          <view class="title">一入电音深似海</view>
        </view>

        <view class="m-content">
          <swiper class="swiper" style="height: 420rpx" :indicator-dots="true" :autoplay="false">
            <block v-for="(num, column) in parseInt(dyTopList.length / 3)" :key="column">
              <swiper-item class="swiper-item">
                <view class="song-list">
                  <view
                    class="song-list-item"
                    v-for="(item, index) in dyTopList.slice(column * 3, column * 3 + 3)"
                    :key="item.id"
                    @tap="onClickMusicItem(item)"
                  >
                    <u-image
                      width="100rpx"
                      height="100rpx"
                      border-radius="10"
                      :src="item.al.picUrl + '?param=270y270'"
                    ></u-image>
                    <view class="flex-row" style="width: 0; flex: 1; align-items: center; margin: 0 24rpx">
                      <view class="song-name">{{ item.name }}</view>
                      <view style="margin: 0 10rpx">-</view>
                      <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                    </view>
                    <view style="width: 40rpx"><u-icon name="play-circle" size="48" color="#e51419"></u-icon></view>
                  </view>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>

</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        

        return {}
    }
})
</script>

<style scoped>

</style>